<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>

	<div class="demoTable">
	   ID：
	   <div class="layui-input-inline">
		      <input name="id" class="layui-input" id="searchId" autocomplete="off">
	   </div>
	      名字：
	   <div class="layui-input-inline">
		      <input name="name" class="layui-input" id="searchName" autocomplete="off">
	   </div>
	   	年龄：
	    <div class="layui-input-inline">
		      <input name="age" class="layui-input" id="searchAge" autocomplete="off">
		</div>
		性别：
		<div class="layui-input-inline">
		      <input name="gender" class="layui-input" id="searchGender" autocomplete="off">
		</div>
		 <button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table  id="tableId" lay-filter="tableFilter"></table>
	
	<script id="topToolbarId" type="text/html">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm layui-icon" lay-event="deleteAll">
				<i class="layui-icon">&#xe640;</i>
			</button>
    		<button class="layui-btn layui-btn-sm" lay-event="insert">
				<i class="layui-icon">&#xe654;</i>
			</button>
  		</div>
	</script>
	
	
	
	<script id="toolbarId" type="text/html">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="userNameTpl">
  		<a href="${path}/user/getUserInfo.action?id={{d.user.id}}" class="layui-table-link">{{d.user.name}}</a>
	</script>
	
	<script type="text/html" id="classNameTpl">
  		<a href="${path}/classes/getClassInfo.action?id={{d.classes.id}}" class="layui-table-link">{{d.classes.name}}</a>
	</script>
	
	<script type="text/html" id="statusTpl">
  		{{#  if(d.status == 1){ }}
			在校
  		{{#  } else if(d.status == 2) { }}
    		毕业
  		{{#  } }}
	</script>
	
	
	<script src="${path}/static/jquery-1.11.3.js"></script>
	<script src="${path}/static/layui/layui.js"></script>
	<script src="${path}/static/mylayer.js"></script>
	<script src="${path}/static/util.js"></script>
	
	<script>
		layui.use('table', function(){
		  var table = layui.table;
		  
		  table.render({
			 id: "tableReload"
		    ,elem: '#tableId'
		    ,toolbar: '#topToolbarId' //开启头部工具栏，并为其绑定左侧模板
		    ,height: 540
		    ,url:'${path}/student/pageList.action'
		    ,page: true
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
			   {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title: 'ID', sort: true}
		      ,{field:'name', title: '用户名'}
		      ,{field:'age', title: '年龄', sort: true}
		      ,{field:'gender', title: '性别'}
		      ,{field:'birthday', title: '出生日期',sort: true}
		      ,{field:'status', title: '学生状态', templet: '#statusTpl'}
		      ,{field: 'classes', title: '班级',templet: '#classNameTpl'}
// 		      ,{field: 'user', title: 'User1',templet: '<div><a href="${path}/user/getUserInfo.action?id={{d.user.id}}" class="layui-table-link">{{d.user.name}}</a></div>'}
		      ,{field: 'user', title: 'User',templet: '#userNameTpl'}
		      ,{title:'操作', toolbar: '#toolbarId',fixed: 'right'}
		    ]]
		  });
		  
		  //头工具栏事件
		  table.on('toolbar(tableFilter)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'deleteAll':
		        var data = checkStatus.data;
		        var ids = [];
		        for(var i in data){
		        	ids.push(data[i].id);
		        }
		        ids = ids.join(',');
		        layer.confirm('确认删除', function(index){
			    	  $.ajax({
			    		  url:"${path}/student/deleteAll.action",
			    		  data:{"ids" : ids},
			    		  dataType:"json",
			    		  type:"post",
			    		  success:function(jsonObj){
			    			  if(jsonObj.code == util.SUCCESS){
			    				  mylayer.successMsg(jsonObj.msg);
			    				  table.reload("tableReload");
			    			  } else {
			    				  mylayer.errorMsg(jsonObj.msg);
			    			  }
			    		  }
			    	  });
			    	  layer.close(index);
			      });
		      break;
		      case 'insert':
		    	  layer.open({
		    		type:2,
					title:"添加学生",
					content:"${path}/student/getInsertPage.action",
					skin: 'layui-layer-molv',
					area:["40%","50%"]
		    	  });
		   	  break;
		    };
		  });

		  
		//监听行工具事件
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'del'){
		      layer.confirm('确认删除', function(index){
		    	  $.ajax({
		    		  url:"${path}/student/deleteById.action",
		    		  data:{"id" : data.id},
		    		  dataType:"json",
		    		  type:"post",
		    		  success:function(jsonObj){
		    			  if(jsonObj.code == util.SUCCESS){
		    				  mylayer.successMsg(jsonObj.msg);
		    				  table.reload("tableReload");
		    			  } else {
		    				  mylayer.errorMsg(jsonObj.msg);
		    			  }
		    		  }
		    	  });
		    	  layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		    	layer.open({
		    		type:2,
					title:"修改学生信息",
					content:"${path}/student/toUpdate.action?id=" + data.id,
					skin: 'layui-layer-molv',
					area:["40%","50%"]
		    	});
		    }
		  });
		
		  var $ = layui.$, active = {
		    reload: function(){
		      
		      //执行重载
		      table.reload('tableReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		         	id:$('#searchId').val(),
		         	name: $('#searchName').val(),
		         	age: $('#searchAge').val(),
		         	gender: $('#searchGender').val()
		        }
		      }, 'data');
		    }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type'); // data-type="reload"
		    active[type] ? active[type].call(this) : '';
		  });
		});
</script>

</body>
</html>